import { _decorator, Component, Node, Sprite } from 'cc';
import { BaseView } from '../../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveNumber } from '../../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { SpriteAtlas } from 'cc';
import { MergeASAP } from '../../../../../scripts/libs/rxjs/cc3/Merge';
import { UIOpacity } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('Swimring')
@executeInEditMode
export class Swimring extends BaseView {

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(ReactiveNumber)
    _opacity: ReactiveNumber = ReactiveNumber.DefaultValue(255);
    @property
    get opacity(): number { return this._opacity.value }
    set opacity(v: number) { this._opacity.Value = v; }

    @property(Sprite)
    mainSprite: Sprite = null;

    @property(SpriteAtlas)
    atlas: SpriteAtlas = null;

    useObserves() {
        return [
            MergeASAP(this._colorId, this._opacity).subscribe(this.refresh.bind(this)),
        ];
    }

    refresh() {
        this.mainSprite.spriteFrame = this.atlas.getSpriteFrame(`s/s${this.colorId}`);
        this.mainSprite.getComponent(UIOpacity).opacity = this.opacity;
    }
}

